<script setup lang="ts">
//
import { storeToRefs } from 'pinia'
import { reactive, watch, computed, ref } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
import FinanceMultiLine from '@/components/Echart/line/FinanceMultiLine.vue'
import { useFinanceStore } from '@/stores/module/finance'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const dialogInfoVisible = dialogInfo.visible
const financeStore = useFinanceStore() // 创建store实例
const { getFixedExpensesAmount }: any = storeToRefs(financeStore)
const options = computed(() => {
  return {
    name: 'FixedExpensesAmount',
    xAxis: {
      data: getFixedExpensesAmount.value.sub_titles,
    },
    data: getFixedExpensesAmount.value.info,
  }
})
watch(
  () => getFixedExpensesAmount.value,
  () => {
    options.value.data.splice(
      0,
      options.value.data.length,
      ...getFixedExpensesAmount.value.info
    )
    options.value.xAxis.data.splice(
      0,
      options.value.xAxis.data.length,
      ...getFixedExpensesAmount.value.sub_titles
    )
  },

  { deep: true }
)
const store = roleStore() as any
const { financeLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = financeLevel
}
info()
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 区分全球区域对比或国家对比  0各个区域，1 各个国家 默认空
const every_code = computed(() => {
  return headersStore().every_code
})
// 深度监听 store.panelPermissions
watch(
  () => store.financeLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
</script>
<template>
  <card-box
    componentName="FixedExpensesAmount"
    :moreBtn="{
      show: true,
      position: 'right',
      transition: 'left',
      childTitle: $t('bi_finance_fixedexpenditureoverview'),
      pName: 'l-box',
    }"
  >
    <template v-slot:child>
      <div v-if="month === '00'">
        <ExpensesLaborCost />
        <ExpensesLeaseCost />
        <ExpensesConsultingCost />
        <ExpensesPublicRelationsCost />
        <ExpensesTrafficCost />
      </div>
    </template>
    <template v-slot:title v-if="getFixedExpensesAmount.title">
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ getFixedExpensesAmount.title }}
      </h1>
    </template>
    <FinanceMultiLine
      :chart-data="options"
      v-if="getFixedExpensesAmount.info.length"
    />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
